<style scoped>
@import "@/assets/table.css";
@import "@/assets/print.css";
.de{
  width: 150px;
}
@media print {
  .de{
    display: none;
  }
}
.formula {
  width: fit-content;
  border: 1px solid #b1b3b8;
  padding: 10px 10px;
  position: absolute;
  top: 112px;
  right: 20px;
}

.title {
  margin-bottom: 10px;
  font-size: 20px;
}

.form_top {
  display: flex;
}

.filtrateForm {
  margin-left: 20px;
  display: flex;
}
input{
  //border: none;
  width: 100%;
  height: 100%;
}
:deep(.el-input__wrapper){
  border-radius: 0;
  height: 100%;
  color: black;
}
:deep(.el-input){
  height: 100%;
  border: none;
  color: black;
}
:deep(.el-input__inner){
  color: black;
}
</style>
<template>
  <div class="form_top">

    <div class="title">
      销售记录
    </div>

    <el-form
        v-model="filtrateForm"
        class="filtrateForm"
    >
      <el-form-item
          style="width: 200px;margin-right: 10px;"
      >
        <el-select
            v-model="filtrateForm.rid"
            placeholder="收货单位"
        >
          <el-option
              v-for="item in getConsigneeList"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item
          style="width: 200px;margin-right: 10px;"
      >
        <el-select
            v-model="filtrateForm.gid"
            placeholder="商品名称"
        >
          <el-option
              v-for="item in goodsNameAllList"
              :label="item.name"
              :value="item.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
            type="primary"
            @click="filtrateFormButton"
        >
          筛选
        </el-button>
        <el-button
            @click="filtrateFormEmpty"
        >
          取消
        </el-button>
      </el-form-item>
    </el-form>
  </div>

  <el-table
      ref="multipleTableRef"
      :data="marketData"
      class="tableWH"
      @selection-change="handleSelectionChange"
      :header-cell-style="{background:'#eee',color:'#606266'}"
      @sort-change="market_sortChange"
  >
    <el-table-column
        type="selection"
        header-align="center"
        align="center"
    />

    <!--    <el-table-column-->
    <!--        header-align="center"-->
    <!--        align="center"-->
    <!--        :label="marketText.goodName"-->
    <!--    >-->
    <!--      <template #default="scope">-->
    <!--        <span class="text-ellipsis">-->
    <!--          <span v-for="(item,index) in scope.row.outboundGoodList">-->
    <!--            {{ item.goodName }}-->
    <!--            {{ index < scope.row.outboundGoodList.length - 1 ? ',' : '' }}-->
    <!--          </span>-->
    <!--        </span>-->
    <!--      </template>-->
    <!--    </el-table-column>-->

    <el-table-column
        header-align="center"
        align="center"
        prop="goodName"
        :label="marketText.goodName"
    >
    </el-table-column>

    <el-table-column
        header-align="center"
        align="center"
        prop="categoryName"
        :label="marketText.categoryName"
    >
    </el-table-column>

    <el-table-column
        header-align="center"
        align="center"
        prop="remark"
        :label="marketText.remark"
    >
    </el-table-column>

    <el-table-column
        :label="marketText.handle"
        header-align="center"
        align="center"
        width="200"
    >
      <template #default="scope">
<!--        <el-button-->
<!--            size="small"-->
<!--        >-->
<!--          编辑-->
<!--        </el-button>-->
        <el-button
            size="small"
            @click="market_handleEdit(scope.$index,scope.row)"
        >
          查看
        </el-button>
<!--        <el-button-->
<!--            size="small"-->
<!--            type="danger"-->
<!--            @click="market_handleDelete(scope.row)"-->
<!--        >删除-->
<!--        </el-button>-->
      </template>
    </el-table-column>
  </el-table>

  <div
      class="pagination"
  >
    <el-pagination
        background
        layout="prev, pager, next"
        :total="market_total"
        :page-size="market_pageSize"
        @current-change="market_currentChange"
        v-model:current-page="market_currentPage"
    />
  </div>
  <el-dialog
      v-model="market_dialogFormVisiblePrice"
      width="850"
  >
    <template #default>
      <div id="printJS-form" ref="printJS-form" class="dialog_from">
        <div>
          <table>
            <thead>
            <tr>
              <th>商品名称</th>
              <th>分类</th>
              <th>收货单位</th>
              <th>部门</th>
              <th>单价</th>
              <th>单位</th>
              <th>数量</th>
              <th>收货人</th>
              <th>总金额</th>
              <th class="de">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in market_dialogFormData.outboundReceivingUnitList">
              <td
                  v-if="index==0"
                  :rowspan="market_dialogFormData.outboundReceivingUnitList.length"
              >
                {{ market_dialogFormData.goodName }}
              </td>

              <td
                  v-if="index==0"
                  :rowspan="market_dialogFormData.outboundReceivingUnitList.length"
              >
                {{ market_dialogFormData.categoryName }}
              </td>
              <td>
                {{ item.receivingUnit }}
              </td>
              <td>
                {{ item.department }}
              </td>
              <td>
                {{ item.costPrice }}
              </td>
              <td>
                {{ item.per }}
              </td>
              <td>
                <el-input
                    v-model="item.number"
                />
<!--                <input-->
<!--                    v-model="item.number"-->
<!--                />-->
              </td>
              <td>
                {{ item.receivingPerson }}
              </td>
              <td
                  v-if="index==0"
                  :rowspan="market_dialogFormData.outboundReceivingUnitList.length"
              >
                {{ market_dialogFormData.sumMoney }}
              </td>
              <td
                  class="de"
              >
                  <el-button
                      size="small"
                      type="primary"
                      @click="updateSalesRecord(item)"
                  >
                    修改
                  </el-button>
                  <el-button
                      size="small"
                      type="danger"
                      @click="market_handleDelete(item.id)"
                  >删除
                  </el-button>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button
          type="primary"
          v-print="`#printJS-form`"
      >
        打印
      </el-button>
<!--      <el-button-->
<!--          type="primary"-->
<!--      >编辑</el-button>-->
      <el-button
          @click="market_dialogFormVisiblePrice=false"
      >取消
      </el-button>
    </template>
  </el-dialog>

  <el-dialog
      v-model="market_dialogFormVisibleDelete"
      width="500"
      title="销售订单记录删除"
  >
    <span>确定删除吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button
            @click="market_dialogFormVisibleDelete=false"
        >
          取消
        </el-button>
        <el-button
            type="primary"
            @click="deleteSales"
        >
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <div class="formula">
    <span class="marginRight">销售额：{{ 100 }} 元</span>
    <span class="marginRight">采购成本/损耗：{{ 100 }} 元</span>
    <span class="marginRight">毛利：{{ 10 }} 元</span>
    <span>毛利率：{{ 10 }}%</span>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {ElMessage, ElTable} from 'element-plus'
// import moment from "moment"
import {
  deleteSalesRecordAPI,
  getConsigneeAPI,
  getGoodsAPI,
  getOrderDetailAPI,
  getSalesRecordAPI, updateSalesRecordAPI
} from "@/axios/api";
//销售页数
const market_pageSize = ref(10)
//销售页码
const market_currentPage = ref(1)
//销售总页数
const market_total = ref<number>()
//销售正逆顺序
const market_sort = ref(1)
const goodsNameList = ref([])
const goodsNameAllList = ref([])
// const goodName = ref()
//筛选
const filtrateForm = ref({
  gid: "",
  rid: ""
})
//存放请求销售数据
const marketData = ref([])
const market_multipleSelection = ref([])//销售全选
const market_dialogFormVisiblePrice = ref(false)//销售查看
const market_dialogFormVisibleDelete = ref(false)//销售删除
const market_dialogFormData = ref({})//销售查看操作中间值
const market_handleDeleteIndex = ref(0)//销售删除操作中间值
const marketText = {
  goodName: "销售商品",
  categoryName: "分类名称",
  remark: "销售备注",
  handle: "操作"
}
const allMoney = ref()
const allNumber = ref()
const receivingUnit = ref()
//存放收货单位列表
const getConsigneeList = ref([])

// const rowspan=market_dialogFormData.value
function getSalesRecord() {//数据
  console.log("getSalesRecord",filtrateForm.value)
  getSalesRecordAPI({
    pageNum: market_currentPage.value,
    pageSize: market_pageSize.value,
    rId: filtrateForm.value.rid,
    gId: filtrateForm.value.gid
  }).then(data => {
    market_total.value = data.data.data.total
    marketData.value = data.data.data.outboundGoodList
    console.log("数据", marketData.value)
    console.log("total", market_total.value)
  })
}

function filtrateFormButton() {
  // if (date.value != "") {
  //   filtrateForm.value.startTime = moment(date.value[0]).format('YYYY-MM-DD')
  //   filtrateForm.value.endTime = moment(date.value[1]).format('YYYY-MM-DD')
  // }
  console.log(filtrateForm.value)
  getSalesRecord()
}

function filtrateFormEmpty() {
  for (const key in filtrateForm.value) {
    filtrateForm.value[key] = ""
  }
  getSalesRecord()
}

function getGoods() {
  getGoodsAPI({
    pageNum: null,
    pageSize: null
  }).then(data => {
    goodsNameAllList.value = data.data.data.stockList
    console.log("商品", goodsNameAllList.value)
  })
}

function getConsignee() {
  getConsigneeAPI({
    pageNum: null,
    pageSize: null
  }).then(data => {
    console.log("收货单位", data)
    getConsigneeList.value = data.data.data
  })
}

function querySearch(queryString: string, cb: any) {
  const results = queryString
      ? goodsNameList.value.filter(createFilter(queryString))
      : goodsNameList.value
  cb(results)
}

function createFilter(queryString: string) {
  return (restaurant) => {
    return (
        restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

function market_currentChange() {//销售分页
  getSalesRecord()
}

function handleSelectionChange(val) {//销售全选
  market_multipleSelection.value = val
}

const market_handleEditIndex = ref(0)
function getOrderDetail(id){
  getOrderDetailAPI({
    oId: id
  }).then(data => {
    console.log("获取详情", data)
    market_dialogFormData.value = data.data.data
  })
}
function market_handleEdit(index, row) {//查看订单
  console.log(row)
  getOrderDetail(row.id)
  market_handleEditIndex.value = row.id
  market_dialogFormVisiblePrice.value = true
}
function updateSalesRecord(item){
  updateSalesRecordAPI({
    id:item.id,
    number:item.number,
    remark:item.remark,
    per:item.per
  }).then(data=>{
    console.log(data)
    ElMessage.success(data.data.data)
    getOrderDetail(market_handleEditIndex.value)
  })
}
function deleteSales() {//确定删除
  if (market_multipleSelection.value.length == 0) {
    deleteSalesRecordAPI({
      ids: market_handleDeleteIndex.value
    }).then(data => {
      console.log("deleteSales", data)
      // getSalesRecord()
      getOrderDetail(market_handleEditIndex.value)
      ElMessage.success(data.data.data)
    })
  } else {
    for (let i = 0; i < market_multipleSelection.value.length; i++) {
      deleteSalesRecordAPI({
        ids: market_multipleSelection.value[i].id
      }).then(data => {
        console.log("deleteSales", data)
        // getSalesRecord()
        getOrderDetail(market_handleEditIndex.value)
        if (i == market_multipleSelection.value.length - 1) {
          ElMessage.success(data.data.data)
        }
      })
    }
  }
  market_dialogFormVisibleDelete.value = false
}

function market_handleDelete(id) {//删除
  market_handleDeleteIndex.value = id
  console.log(market_handleDeleteIndex.value)
  market_dialogFormVisibleDelete.value = true
}

function market_sortChange(val) {
  console.log(val)
  if (val.order == "ascending" || val.order == null) {
    market_sort.value = 1
  } else if (val.order == "descending") {
    market_sort.value = 0
  }
  getSalesRecord()
}

onMounted(() => {
  getSalesRecord()
  getGoods()
  getConsignee()
})
</script>
